<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link
      href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <script src="../../vue.js"></script>
  <body>
    <div id="app" class="container">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">注册</h3>
        </div>
        <div class="panel-body">
          <form class="form-horizontal">
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label"
                >姓名</label
              >
              <div class="col-sm-6">
                <input
                  v-model="username"
                  type="email"
                  class="form-control"
                  id="inputEmail3"
                  placeholder="姓名"
                />
              </div>
              <div
                v-show="user()"
                class="col-sm-4 form-control-static text-danger"
              >
                用户名必须是8-12位字符
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label"
                >密码</label
              >
              <div class="col-sm-6">
                <input
                  v-model="password"
                  type="password"
                  class="form-control"
                  id="inputPassword3"
                  placeholder="密码"
                />
              </div>
              <div
                v-show="pwd()"
                class="col-sm-4 form-control-static text-danger"
              >
                密码必须是8-12位字符
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">性别</label>
              <div class="col-sm-10">
                <label class="radio-inline">
                  <input
                    type="radio"
                    v-model="sex"
                    name="inlineRadioOptions"
                    id="inlineRadio1"
                    value="男"
                  />
                  男
                </label>
                <label class="radio-inline">
                  <input
                    type="radio"
                    v-model="sex"
                    name="inlineRadioOptions"
                    id="inlineRadio2"
                    value="女"
                  />
                  女
                </label>
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <!--类名： text-success： 绿色  ； text-danger：红色 -->
                <div class="checkbox" class="text-success">
                  <label :class="isAgree?'text-success':'text-danger'">
                    <input type="checkbox" v-model="isAgree" /> 是否同意条款
                  </label>
                </div>
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label">城市</label>
              <div class="col-sm-6">
                <select v-model="city" class="form-control" value="男">
                  <option value="">--请选择城市--</option>
                  <option value="深圳">深圳</option>
                  <option value="广东">广东</option>
                  <option value="上海">上海</option>
                </select>
              </div>
              <div
                v-show="city!=''?false:true"
                class="col-sm-4 text-danger form-control-static"
              >
                请选择城市
              </div>
            </div>

            <div class="form-group">
              <div class="col-sm-offset-2 col-sm-10">
                <!-- 不能点击 加类名 disabled -->
                <button
                  :class="!present()?'disabled':''"
                  type="submit"
                  class="btn btn-success"
                >
                  注册
                </button>
                <button
                  :class="!reset()?'disabled':''"
                  type="submit"
                  class="btn btn-danger"
                >
                  重置
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </body>
  <script>
    // 复习 ：逻辑搞清楚
    // 注册作业
    new Vue({
        el:"#app",
        data:{
            username:"",
            password:"",
            sex:"女",
            isAgree:false,
            city:""
        },
        methods:{
            user(){
                if(this.username.length>=8&&this.username.length<=12){
                    return false;
                }else{
                    return true;
                }
            },
            pwd(){
                if(this.password.length>=8&&this.password.length<=12){
                    return false;
                }else{
                    return true;
                }
            },
            present(){
                if(!this.user()&&!this.pwd()&&this.isAgree&&this.city!=""){
                    return true;
                }else{
                    return false;
                }
            },
            reset(){
                if(this.username.length>0||this.username.password>0||this.isAgree||this.city!=''||this.sex=='男'){
                    return true;
                }else{
                    return false;
                }
            }
        }
    })
  </script>
</html>
